<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sessionStorage</title>
  </head>
  <body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>
    <script>
      /* 
      sessionStorage存储的数据在浏览器关闭后数据会消失
      */
      let p = { name: "张三", age: "18" };

      // 向sessionStorage中存储数据
      function saveData() {
        // 存储的为key-value 类型都为字符串！
        sessionStorage.setItem("msg", "hello");
        sessionStorage.setItem("msg2", 666);
        sessionStorage.setItem("person", JSON.stringify(p));
      }

      // 向localStroge中读取数据
      function readData() {
        console.log(sessionStorage.getItem("msg"));
        console.log(sessionStorage.getItem("msg2"));
        console.log(sessionStorage.getItem("person"));
        console.log(JSON.parse(sessionStorage.getItem("person")));

        console.log(sessionStorage.getItem("msg3")); // null
      }

      // 向localStroge中删除数据
      function deleteData() {
        sessionStorage.removeItem("msg");
        sessionStorage.removeItem("msg2");
      }

      // 清空localStroge中的数据
      function deleteAllData(){
        sessionStorage.clear();
      }
    </script>
  </body>
</html>
